<template>
  <div>
    <el-table height="300" :data="tableData" border @sort-change="sortChangeHandler">
      <lt-table-column-edit prop="name" label="姓名" width="180" />
      <lt-table-column-edit prop="date" label="日期" width="180" sortable="custom">
        <template slot="preview">
          111
        </template>
      </lt-table-column-edit>
      <lt-table-column-edit prop="address" label="地址" :sortable="true" />
      <lt-table-column-operation
        ref="operationRef"
        v-model="tableData"
        width="140"
        :row-data="rowData"
        primary-key="id"
        @save="saveHanlder"
        @delete="custDelete"
      />
    </el-table>
  </div>
</template>

<script>
import ltTableColumnEdit from '@/components/EditTable/lt-table-column-edit/lt-table-column-edit.vue'
import ltTableColumnOperation from '@/components/EditTable/lt-table-column-operation/lt-table-column-operation.vue'
export default {
  name: 'EditForm',
  components: { ltTableColumnEdit, ltTableColumnOperation },
  data() {
    return {
      tableData: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ],
      rowData: {
        id: '',
        date: '',
        name: '',
        address: ''
      }
    }
  },
  methods: {
    saveHanlder({ row }) {
      console.log(11, row)
      this.$refs.operationRef.saveComplete(row)
    },
    custDelete({ row, index }) {
      // 模拟异步请求
      this.$refs.operationRef.deleteComplete(index)
    },
    sortChangeHandler(a) {
      console.log('排序', a)
    }
  }
}
</script>

